import React, { useEffect,useState } from 'react';
import styles from './style.less'
import moment from 'moment';
import { history } from 'umi';
/**
 * 上一周
 * @param {*} now 
 */
function getPrevWeekDays(now) {
  let date = []
  date.push(moment(now).add(-7, 'days').format('YYYY-MM-DD'))
  date.push(moment(now).add(-6, 'days').format('YYYY-MM-DD'))
  date.push(moment(now).add(-5, 'days').format('YYYY-MM-DD'))
  date.push(moment(now).add(-4, 'days').format('YYYY-MM-DD'))
  date.push(moment(now).add(-3, 'days').format('YYYY-MM-DD'))
  date.push(moment(now).add(-2, 'days').format('YYYY-MM-DD'))
  date.push(moment(now).add(-1, 'days').format('YYYY-MM-DD'))
  return date
}

/**
 * 下一周
 * @param {*} last 
 */
function getNextWeekDays(last) {
  let date = []
  date.push(moment(last).add(1, 'days').format('YYYY-MM-DD'))
  date.push(moment(last).add(2, 'days').format('YYYY-MM-DD'))
  date.push(moment(last).add(3, 'days').format('YYYY-MM-DD'))
  date.push(moment(last).add(4, 'days').format('YYYY-MM-DD'))
  date.push(moment(last).add(5, 'days').format('YYYY-MM-DD'))
  date.push(moment(last).add(6, 'days').format('YYYY-MM-DD'))
  date.push(moment(last).add(7, 'days').format('YYYY-MM-DD'))
  return date
}
const ScheduleGroup = props => {
   const { dispatch,prev,next,weekList,classTableInfoMap } = props;
   /**
    * 上周
    */
   const _prev = () =>{
    prev(getPrevWeekDays(weekList[0]))
   }

   /**
    * 下周
    */
   const _next = () =>{
    next(getNextWeekDays(weekList[6]))
   }

   const goDetail = (id) =>{
    history.push(`/sign/reservation/detail/${id}`);
  }
    return (
      <div className={`fc fc-ltr fc-unthemed ${styles.schedulePrivate}`}>
        <div className="fc-toolbar fc-header-toolbar">
          <div className="fc-left">
            <div className="fc-button-group">
              <button
                type="button"
                className="fc-prev-button fc-button fc-button-primary"
                aria-label="prev"
                onClick={_prev}
              >
                <span className="fc-icon fc-icon-chevron-left"></span>
              </button>
              <button
                type="button"
                className="fc-next-button fc-button fc-button-primary"
                aria-label="next"
                onClick={_next}
              >
                <span className="fc-icon fc-icon-chevron-right"></span>
              </button>
            </div>
          </div>
          <div className={`fc-center ${styles.fcCenter}`}>
            <h2>{moment(weekList[6]).format('YYYY年M月')}</h2>
          </div>
        </div>
        <div className="fc-view-container">
          <div className="fc-view fc-dayGridMonth-view fc-dayGrid-view">
            <table>
              <thead className="fc-head">
                <tr>
                  <td className="fc-head-container fc-widget-header">
                    <div className="fc-row fc-widget-header">
                      <table className="">
                        <thead>
                          <tr>
                            <th className="fc-day-header fc-widget-header fc-mon">周一</th>
                            <th className="fc-day-header fc-widget-header fc-tue">周二</th>
                            <th className="fc-day-header fc-widget-header fc-wed">
                              <span>周三</span>
                            </th>
                            <th className="fc-day-header fc-widget-header fc-thu">
                              <span>周四</span>
                            </th>
                            <th className="fc-day-header fc-widget-header fc-fri">
                              <span>周五</span>
                            </th>
                            <th className="fc-day-header fc-widget-header fc-sat">
                              <span>周六</span>
                            </th>
                            <th className="fc-day-header fc-widget-header fc-sun">
                              <span>周日</span>
                            </th>
                          </tr>
                        </thead>
                      </table>
                    </div>
                  </td>
                </tr>
              </thead>
              <tbody className="fc-body">
                <tr>
                  <td className="fc-widget-content">
                    <div
                      className="fc-scroller fc-day-grid-container"
                      style={{ overflow: 'hidden' }}
                    >
                      <div className="fc-day-grid">
                        <div className="fc-row fc-week fc-widget-content" style={{ minHeight: 150 }}>
                          <div className="fc-bg">
                            <table className="">
                              <tbody>
                                <tr>
                                  {
                                    weekList.map((item,index)=><td key={index}
                                    className="fc-day fc-widget-content fc-wed fc-past"
                                    data-date={item}
                                  ></td>)
                                  }
                                </tr>
                              </tbody>
                            </table>
                          </div>
                          <div className="fc-content-skeleton">
                            <table>
                              <thead>
                                <tr>
                                  {
                                    weekList.map((item,index)=><td key={index} className="fc-day-top fc-wed fc-past" data-date={item}>
                                    <span className="fc-day-number">{moment(item).format('D')}日</span>
                                  </td>)
                                  }
                                </tr>
                              </thead>
                              <tbody>
                                <tr>
                                  {
                                    weekList.map((item,index)=>{
                                      return <td className="fc-event-container" key={index}>
                                        {
                                          classTableInfoMap&&classTableInfoMap[item]&&classTableInfoMap[item].map((_item,_index)=>{
                                            return <a className="fc-day-grid-event fc-h-event fc-event fc-start fc-end" key={_index} onClick={()=>goDetail(_item.id)}>
                                            <div className={`fc-content ${styles.fcContent}`}>
                                              <span className={styles.fcTimeSchedule}>{_item.timePeriod}</span>{' '}
                                              <span className={styles.fcTitleSchedule}>{_item.courseName}</span>
                                              <span className={styles.fcCoachSchedule}>{_item.coachName}</span>
                                              <span className={styles.fcCoachSchedule}>约：{_item.bookingNum||0}/{_item.maximumAttendance}</span>
                                              <span className={styles.fcCoachSchedule}>到：{_item.signInNum||0}</span>
                                            </div>
                                          </a>
                                          })
                                        }
                                    </td>
                                    })
                                  }
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                    </div>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    );
}

  export default ScheduleGroup